'use client'

import React from 'react'
import { Button, Space, Tooltip, Typography } from 'antd'
import { HomeOutlined, SettingOutlined } from '@ant-design/icons'
import { Breadcrumb } from './Breadcrumb'
import { BackButton } from './BackButton'
import { ThemeToggle } from './ThemeToggle'
import { useNavigation } from '@/hooks/useNavigation'

const { Title } = Typography

interface NavigationHeaderProps {
    title?: string
    showBackButton?: boolean
    showHomeButton?: boolean
    className?: string
    extra?: React.ReactNode
}

export function NavigationHeader({
    title,
    showBackButton = true,
    showHomeButton = true,
    className,
    extra
}: NavigationHeaderProps) {
    const { goHome } = useNavigation()

    const handleHomeClick = () => {
        goHome()
    }

    return (
        <div className={`navigation-header bg-white border-b border-gray-200 px-4 py-3 transition-all duration-300 ${className || ''}`}>
            <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4 flex-1">
                    {/* 应用标题 */}
                    <div className="flex items-center space-x-3">
                        <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
                            <span className="text-white font-bold text-sm">医</span>
                        </div>
                        <Title level={4} className="mb-0 hidden sm:block text-gray-800">
                            医学影像处理平台
                        </Title>
                    </div>

                    {/* 导航按钮 */}
                    <Space className="hidden md:flex">
                        {showBackButton && (
                            <BackButton />
                        )}
                        {showHomeButton && (
                            <Tooltip title="返回首页">
                                <Button
                                    type="text"
                                    icon={<HomeOutlined />}
                                    onClick={handleHomeClick}
                                    className="flex items-center hover-lift"
                                >
                                    首页
                                </Button>
                            </Tooltip>
                        )}
                    </Space>

                    {/* 面包屑导航 */}
                    <div className="flex-1 hidden lg:block">
                        <Breadcrumb />
                    </div>

                    {/* 页面标题 */}
                    {title && (
                        <div className="text-lg font-semibold text-gray-800 hidden xl:block">
                            {title}
                        </div>
                    )}
                </div>

                {/* 右侧操作区 */}
                <div className="flex items-center space-x-2">
                    {/* 移动端导航按钮 */}
                    <div className="flex md:hidden">
                        {showBackButton && <BackButton />}
                        {showHomeButton && (
                            <Button
                                type="text"
                                icon={<HomeOutlined />}
                                onClick={handleHomeClick}
                                size="small"
                            />
                        )}
                    </div>

                    {/* 主题切换 */}
                    <ThemeToggle />

                    {/* 设置按钮 */}
                    <Tooltip title="设置">
                        <Button
                            type="text"
                            icon={<SettingOutlined />}
                            className="hover-lift"
                        />
                    </Tooltip>

                    {/* 额外内容 */}
                    {extra && (
                        <div className="flex items-center">
                            {extra}
                        </div>
                    )}
                </div>
            </div>
        </div>
    )
}